<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('问题设置')" />
</head>
<body>
    <div class="main-content">
        <form id="form-ques-add" class="form-horizontal">
            <input type="hidden" id="chapterId" name="chapterId">
            <div class="row">
            	<div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">问题：</label>
                        <div class="col-sm-10">
                            <input name="quesName" id="quesName"   class="form-control" type="text" maxlength="30" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">选项A：</label>
                        <div class="col-sm-8">
                            <input name="selectA" id="selectA"   class="form-control" type="text" maxlength="30" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">选项B：</label>
                        <div class="col-sm-8">
                            <input name="selectB" id="selectB"   class="form-control" type="text" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">选项C：</label>
                        <div class="col-sm-8">
                            <input name="selectC" id="selectC"   class="form-control" type="text" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">选项D：</label>
                        <div class="col-sm-8">
                            <input name="selectD" id="selectD"   class="form-control" type="text" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">答案选项：</label>
                        <div class="col-sm-8">
                            <input name="answer" id="answer"   class="form-control" type="text" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">排序：</label>
                        <div class="col-sm-8">
                            <input name="orderNum" id="orderNum"   class="form-control" type="text" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-offset-5 col-sm-10">
                    <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>新增</button>&nbsp;
                </div>
            </div>
        </form>
        <div class="col-sm-12 select-table table-striped">
            <table id="table"></table>
        </div>
    </div>
      
	<th:block th:include="include :: footer" />
	<script>
	    var prefix = ctx + "chapter";
        let $table = $('#table');
        var chapterId = [[${chapterId}]];
        $('#chapterId').val(chapterId);
        $(function() {

            queryQuesList(chapterId);
        });

        function queryQuesList(chapterId) {
            $table.bootstrapTable({
                url: prefix + '/ques/list/' + chapterId,
                pagination: false,       //显示分页条
                showColumns: false,
                showPaginationSwitch: false,     //显示切换分页按钮
                showRefresh: false,      //显示刷新按钮
                columns: [{
                    checkbox: true
                }, {
                    field: 'quesId',
                    title: '问题ID',
                    visible: false
                }, {
                    field: 'chapterId',
                    title: '章节ID',
                    visible: false
                }, {
                    field: 'quesName',
                    title: '问题'
                },
                    {
                        field: 'selectA',
                        title: '选项A'
                    },
                    {
                        field: 'selectB',
                        title: '选项B'
                    },
                    {
                        field: 'selectC',
                        title: '选项C'
                    },
                    {
                        field: 'selectD',
                        title: '选项D'
                    },
                    {
                        field: 'answer',
                        title: '答案'
                    },{
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs ' + '" href="javascript:void(0)" onclick="remove(\'' + row.quesId + '\')"><i class="fa fa-edit"></i>删除</a> ');
                            return actions.join('');
                        }
                    }
                ],

            });
        }

        function remove(id) {
            $.ajax({
                url: prefix + '/removeQues',
                type: 'post',
                data: {
                    id: id
                },
                dataType: "json",
                success: function(result) {
                    $('#table').bootstrapTable('refresh');
                }
            });
        }

	    function submitHandler() {
            if ($.validate.form()) {

                addQues(prefix + "/ques/add", $('#form-ques-add').serialize());

            }
        }

        function addQues(url, data) {

            $.ajax({
                url: url,
                type: 'post',
                data: data,
                dataType: "json",
                success: function(result) {
                    $('#table').bootstrapTable('refresh');
                }
            });

        }



    </script>
</body>
</html>